<template>
	<view class="all">
		<view class="dl">
			<view class="aa"> </view>
			<view class="dla">
				<navigator url="../dl/dl">登录</navigator>
				<!-- <navigator url="../details/details">登录</navigator> -->
			</view>
		</view>

		<view class="new-file">
			<!-- 第一种方法 -->
			<!-- 头部选项卡 -->
			<view class="head-nav">
				<view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)">收藏</view>
				<view :class="navIndex == 2 ? 'activite' : ''" @click="checkIndex(2)">历史</view>
				<view :class="navIndex == 3 ? 'activite' : ''" @click="checkIndex(3)">打卡</view>
			</view>
			<!-- 内容切换 -->
			<view class="content" v-if="navIndex == 1">
				<view class="a">
					<b>暂无喜欢的美食</b>
				</view>
				<view class="b"> 快去收藏喜欢的美食吧 </view>
			</view>

			<view class="content" v-if="navIndex == 2">
				<view class="a">
					<b>暂未探索美食</b>
				</view>
				<view class="b"> 快去探索美食吧 </view>
			</view>

			<view class="content" v-if="navIndex == 3">
				<view class="a">
					<b>暂未发现美食</b>
				</view>
				<view class="b"> 快去发现美食吧 </view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		name: "login-before",
		data() {
			return {
				navIndex: 1,

				navList: ["选项卡一", "选项卡二", "选项卡三"],
				listIndex: 0,
			};
		},
		methods: {
			checkIndex(index) {
				this.navIndex = index;
			},

			checkListIndex(index) {
				this.listIndex = index;
			},
		},
	}
</script>

<style lang="scss">
	a {
		color: rgb(139, 139, 139);
	}

	a:hover {
		color: black;
	}

	.all {
		.dl {
			width: 100%;
			height: 400rpx;
			background-color: green;
			padding-top: 30px;

			.aa {
				width: 100%;
				height: 90rpx;
			}

			.dla {
				width: 370rpx;
				height: 100rpx;
				background-color: white;
				margin: 0 auto;
				border-radius: 35px;
				text-align: center;
				line-height: 100rpx;
				font-size: 32rpx;
				color: green;
			}
		}
	}

	.new-file {
		width: 100%;
		height: 600rpx;
		// background-color: chartreuse;
		border-radius: 35px 35px 0 0;
	}

	.head-nav {
		width: 50%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		color: rgb(139, 139, 139);
		// background-color: aqua;
	}

	.activite {
		font-weight: bold;
		border-bottom: 6rpx solid red;
		color: black;
		// background-color:red;
	}

	.head-nav>view {
		padding-bottom: 10rpx;
		// background-color: #0065d9;
	}

	.content {
		width: 100%;
		height: 700rpx;
		// background-color: aquamarine;
		border-top: 1px solid rgb(241, 241, 241);
	}

	.a {
		width: 50%;
		height: 50rpx;
		// background-color: red;
		text-align: center;
		line-height: 50rpx;
		margin: 0 auto;
		font-size: 32rpx;
		margin-top: 50px;
	}

	.b {
		width: 50%;
		height: 50rpx;
		// background-color: red;
		text-align: center;
		line-height: 50rpx;
		margin: 0 auto;
		font-size: 30rpx;
		color: rgb(121, 121, 123);
		margin-top: 10rpx;
	}
</style>
